<!-- 课程考核管理: 学员:课程考核管理:互联网选修课成绩填报 -->
<template><div style="width:100% !important;">
  <el-form inline="true">
      <el-form-item label="学期">
          <el-select style="width:130px;"
            v-model="queryForm.semester" size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in semesterArray"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
      </el-form-item>
      <el-button size="mini" type="primary" icon="el-icon-search" style="margin:6px 0;">查询</el-button>
  </el-form>
  <div class="search-result-title">
    {{ searchResultModel.semester }}互联网选修课有：
  </div>
  <div style="margin:1vh 0 1vh 0;">
        <el-table
          :data="tableData"
          border
          class="xpaas-table-class"
          row-class-name="xpaas-row-class"
          cell-class-name="xpaas-cell-class"
          header-row-class-name="xpaas-header-row-class"
          header-cell-class-name="xpaas-header-cell-class"
          :span-method="computeSpan"
        >
          <el-table-column prop="col1" label="状态" align="center">
            <template slot-scope="scope"><xpaas-draw :rowIdx="scope.$index" :rowData="scope.row" /></template>
          </el-table-column>
          <el-table-column prop="col2" label="提交" align="center" width="150">
            <template slot-scope="scope"><el-row><el-col :span="12">
              <el-button
                size="mini"
                type="primary">填报</el-button>
              </el-col><el-col :span="12">
              <el-button
                size="mini"
                type="danger">提交</el-button>
            </el-col></el-row></template>
          </el-table-column>
          <el-table-column prop="col3" label="平台名称" align="center" />
          <el-table-column prop="col4" label="选修互联网课程名称" align="center" />
          <el-table-column prop="col5" label="学时" align="center" />
          <el-table-column prop="col6" label="成绩" align="center" />
          <el-table-column prop="col7" label="成绩证明截图" align="center" />
          <el-table-column prop="col8" label="其他证明材料" align="center" />
          <el-table-column prop="col9" label="备注" align="center" />
        </el-table>
  </div>
        <div class="search-result-desc-panel">
          <span>共找到 {{ searchResultPagin.totalCount }} 条记录，当前显示 {{
          (searchResultPagin.totalCount > 0) ? ((searchResultPagin.currentPage - 1) * searchResultPagin.perpageCount + 1) : (0)
          }} - {{
          (searchResultPagin.totalCount > 0) ? (searchResultPagin.currentPage * searchResultPagin.perpageCount) : (0)
          }} 条记录。</span>
        </div>
        <div class="search-result-pagin-panel">
          <el-pagination
            @size-change="onPerpageSizeChangeHandler"
            @current-change="onCurrentPageNoChangeHandler"
            :current-page="searchResultPagin.currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="searchResultPagin.perpageCount"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchResultPagin.totalCount">
          </el-pagination>
        </div>
</div></template>
<script>
import Draw from './draw'

export default {
  components: {
    'xpaas-draw': Draw
  },
  data: function() {
    return {
      semesterArray: [{label: '2021下', value: '2021下'},{label: '2022上', value: '2022上'}],
      queryForm: {
        semester: ''
      },
      searchResultModel: {
        semester: ''
      },
      tableData: [{
        col1: 'col1',
        col2: 'col2',
        col3: 'col3',
        col4: 'col4',
        col5: 'col5',
        col6: 'col6',
        col7: 'col7',
        col8: 'col8',
        col9: 'col9'
      },{
        col1: 'colb1',
        col2: 'colb2',
        col3: 'colb3',
        col4: 'colb4',
        col5: 'colb5',
        col6: 'colb6',
        col7: 'colb7',
        col8: 'colb8',
        col9: 'colb9'
      }],
      searchResultPagin: {
        totalCount: 1000,
        perpageCount: 10,
        currentPage: 3,
        currentStart: 31,
        currentEnd: 40
      }
    }
  },
  methods: {
    onPerpageSizeChangeHandler: function(pPageSize) {
      this.searchResultPagin.perpageCount = pPageSize
    },
    onCurrentPageNoChangeHandler: function(pPageNo) {
      this.searchResultPagin.currentPage = pPageNo
    },
    computeSpan: function({ row, column, rowIndex, columnIndex }) {
      let result = [1, 1]
      if (0 == (rowIndex % 2)) {
        if (0 == columnIndex || 1 == columnIndex) {
          result = [2, 1]
        }
      } else {
        if (0 == columnIndex) {
          result = [1, 7]
        }
      }
      return result
    },
  }
};
</script>
<style lang="less" scoped>
@import "./courseAssessmentScoped.less";
@import "./exportBtn.less";

.search-result-title {
  font-size: 18px;
  font-weight: bold;
  font-family: @fontFamily;
  color: #004ca7;
}
.search-result-pagin-panel {
  text-align:right;
}
.search-result-desc-panel {
  font-size: 14px;
  font-weight: normal;
  font-family: @fontFamily;
  color: #004ca7;
  margin: 15px 0 0 0;
}
</style>